<!DOCTYPE html>
<html>
<head>
  <title>Create Icons</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    canvas {
      margin: 10px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <canvas id="icon16" width="16" height="16"></canvas>
  <canvas id="icon48" width="48" height="48"></canvas>
  <canvas id="icon128" width="128" height="128"></canvas>
  
  <script>
    // Function to draw a simple icon with XHS text
    function drawIcon(canvasId, size) {
      const canvas = document.getElementById(canvasId);
      const ctx = canvas.getContext('2d');
      
      // Background
      ctx.fillStyle = '#fe2c55';
      ctx.fillRect(0, 0, size, size);
      
      // Text
      ctx.fillStyle = 'white';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      
      // Adjust font size based on icon size
      const fontSize = Math.floor(size * 0.5);
      ctx.font = `bold ${fontSize}px Arial`;
      
      // Draw XHS text in center
      ctx.fillText('XHS', size / 2, size / 2);
      
      // Download the icon
      const link = document.createElement('a');
      link.download = `icon${size}.png`;
      link.href = canvas.toDataURL('image/png');
      link.click();
    }
    
    // Draw icons when page loads
    window.onload = function() {
      drawIcon('icon16', 16);
      drawIcon('icon48', 48);
      drawIcon('icon128', 128);
    };
  </script>
</body>
</html> 